<template>
    <article class="bus">
        汽车有 {{countBus|changeZeroToString}}辆
        <hr>
        <slot name="2"></slot>
        <slot name="1"></slot>
        <!--<bus :bus="bus"></bus>--><!-- 自己引用自己.. -->
    </article>
</template>

<script>
import Bus from './Bus.vue'
export default {
    name: "b-bus",
    props: ['bus'],
    data() {
        return {
            countBus: 0
        }
    },
    created() {
        var that = this;
        // debugger
        this.$props.bus.$on("busev", function (data) {
            // debugger;
            that.countBus += 2;
        })
    },
    components:{
        Bus:Bus
    },
    beforeCreate(){
        // this.$options.components.Bus = Bus;
    },
    filters:{
        changeZeroToString(raw){
            return raw.toString().replace(/0/g,"zero")
        }
    }


}
</script>

<style>
article.bus{
    background-color: rgba(0,128,0,0.3)
}

</style>
